<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0; padding:0px;}
        #bigbox{
            width:500px;
            height:500px;
            background:pink;
            overflow:hidden;
        }
        #box{
            width:350px;
            height:400px;
            background:#fff;
            margin:50px auto;
            position:relative;
        }
        h3{
            line-height:50px;
            text-indent:4em;
            font-weight:100;
        }
        #yanzheng{
            margin:10px auto;
            background:pink;
            width:300px;
            height:30px;
            border:1px solid deeppink;
            position:relative;
            line-height:30px;
        }
        #name{
            display:block;
            height:50px;
            border:1px solid #999999;
            width:300px;
            margin: 20px auto;
            background:url("images/a1.jpg") no-repeat;
            background-size:50px 50px;
            text-indent:4em;
        }
        #mima{
            display:block;
            height:50px;border:1px solid #999999;
            width:300px;
            margin: 20px auto;
            background:url("images/a2.jpg") no-repeat;
            background-size:50px 50px;
            text-indent:4em;
        }
        span{position:absolute;font-size:20px;color:#999999}
        span:hover{cursor:pointer;}
        #button{
            display:block;
            width:300px;
            margin: 20px auto;
            height:40px;
            background:deeppink;
            border:none;
            color:#fff;
            font-size:20px;
        }
        #yanzheng #aa{
            float:left;
            margin:6px 10px;
            background:red;
            width:18px;
            height:18px;
            border-radius:9px;
            color:#fff;
            line-height:18px;
            text-align:center;
            font-size:16px;
        }
        #tuo{
            width:250px; height:30px;
            border:1px solid #333;
            margin:10px auto;
            position:relative;
            background:#666666;
            text-align:center;
            line-height:30px;
        }
        #tuo #kuai{position:absolute;
            height:30px;
            width:40px;
            text-align:center;
            line-height:30px;
            background:#ffffff;
            top:0px;}
        #tuo #kuai:hover{cursor:pointer;}
        #tuo #xianshi{position:absolute;
            height:30px;
            width:0px;
            text-align:center;
            line-height:30px;
            background:greenyellow;
            z-index:2;
            top:0px;
        color:#fff;
              opacity:0.5;}
        #gou{
            border-radius: 9px;
            width:18px;
            height:18px;
            background:greenyellow;
            margin:6px auto;
            font-size:12px;
            line-height:18px;
            color:#fff;
        }
    </style>

</head>
<body>
    <div id="bigbox">
        <div id="box">
            <h3>登录</h3>
            <hr/>
            <div id="yanzheng">
            </div>
            <input type="text"id="name" placeholder="用户名"/>
            <input type="text"id="mima"placeholder="密码"/>
            <span style="top:125px;left:300px"id="xtop">x</span>
            <span style="top:197px;left:300px"xbottom>x</span>
            <input type="checkbox"id="baocun"style="margin-left:25px"/>7天内自动登录<br>
            <button id="button">登录</button>
            <div id="tuo">
                按住滑块拖动到右边
                <div id="kuai">>></div>
                <div id="xianshi"></div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="js/MyCookie.js"></script>
<script>
    //用户名输入框失去焦点事件
    document.getElementById('name').onblur=function(){
        var reg=/^[a-zA-Z_][a-zA-Z0-9_]{5,19}$/;     //用户名验证
        if(reg.test(this.value)){
            document.getElementById('yanzheng').innerHTML=" ";
        }else {
            document.getElementById('yanzheng').innerHTML='<div id="aa">-</div>'+"用户名格式错误";
        }
    }
    //密码输入框失去焦点事件
    document.getElementById('mima').onblur=function(){
        var reg=/^[^\u4E00-\u9FA5]{6,20}$/     //非中文验证
        if(reg.test(this.value)){
            document.getElementById('yanzheng').innerHTML=" ";
        }else {
            document.getElementById('yanzheng').innerHTML='<div id="aa">-</div>'+"密码格式错误";
        }
    }
    //滑块验证
    document.getElementById('kuai').onmousedown=function(evt){
        var e=evt||window.event;
        var x=e.clientX-this.offsetLeft;         //获取按下时的点击点距离“kuai”元素的X轴距离
        document.getElementById('kuai').onmousemove=function(evt){
            var e=evt||window.event;
            //滑块到边
            if(document.getElementById('kuai').offsetLeft>=210){
                document.getElementById('kuai').style.left="210px";
                document.getElementById('kuai').innerHTML="<div id='gou'>√</div>"
                document.getElementById('check').innerHTML="验证通过";
                 document.getElementById('xianshi').style.opacity="1";

            }else {
                document.getElementById('kuai').style.left=e.clientX-x+"px";
            }
            document.getElementById('xianshi').style.width=document.getElementById('kuai').offsetLeft+"px";
        }
        window.onmouseup=function(evt){
            var e=evt||window.event;

            //当鼠标松开的时候，滑块没拉到最右边，就回到原点
            if(document.getElementById('kuai').offsetLeft<210){
                document.getElementById('kuai').style.left="0px";
                document.getElementById('xianshi').style.width="0px";
            }

            document.getElementById('kuai').onmousemove=null;
            window.onmouseout=null;
        }
    }



//点击“X”去掉对应input框的内容
    // 获取box中所有的input元素
    var str=document.getElementById('box').getElementsByTagName('span');
    //给所有input元素设置点击事件
    for(var i=0;i<str.length;i++){
        str[i].onclick=function(){
            this.previousElementSibling.previousElementSibling.value="";
        }
    }


    //点击登录按钮
    document.getElementById('button').onclick=function(){
        //判断是否选中7天免登录和用户名，密码的格式是否正确
        if(document.getElementById('baocun').checked&&document.getElementById('yanzheng').value==undefined){

            //保存name到cookie
            setCookie("name",document.getElementById('name').value,7);
            //保存密码到cookie
            setCookie("mima",document.getElementById('mima').value,7);

        }
        console.log(document.getElementById('yanzheng').innerText);
        if(document.getElementById('yanzheng').innerText==""&&document.getElementById('name').value!=""&&document.getElementById('mima').value!=""){

            //通过url传值给‘发布’页面
            var myurl="kaoshi2.html"+"?"+"name="+document.getElementById('name').value;
            window.location.assign(myurl);
        }
    }
</script>